<template>
  <div class="mask" v-show="showDialog">
    <div class="dialog">
      <div class="dialog-header">
        <div class="title pos-left">{{take}} - {{dialogTitle}}</div>
        <ul class="tools pos-right">
          <li class="item">
            <button class="btn" type="button" @click="closeDialog">
              <i class="icon icon-close"></i>
            </button>
          </li>
        </ul>
      </div>
      <div class="dialog-body scroll">
        <ul class="panel">
          <li class="item">
            <select class="selector" v-model="dangerType">
              <option value selected>所有类型</option>
              <option v-for="(item,idx) in dangerTypeArray" :value="item" :key="idx">{{item}}</option>
            </select>
          </li>
          <li class="item">
            <input
              type="date"
              value
              class="datepicker"
              v-model="startTime"
              placeholder="开始时间"
              :max="timeLimit"
              :min="timeMin"
            />
          </li>
          <li class="item">至</li>
          <li class="item">
            <input
              type="date"
              value
              class="datepicker"
              v-model="endTime"
              placeholder="结束时间"
              :max="timeLimit"
              :min="timeMin"
            />
          </li>
            <li class="item">
            <input type="text" name id class="textbox" placeholder="输入部位名称以搜索" v-model="keyword" />
          </li>
          <li class="item">
            <button class="btn bg-blue" type="button" @click="query()">
              <span class="text">查询</span>
            </button>
          </li>
        </ul>
        <div class="row">
          <div class="col col-left">
            <div class="chart" id="chart-dl-district"></div>
          </div>
          <div class="col col-right">
            <table class="dtable">
              <thead>
                <tr>
                  <td>序号</td>
                  <td>告警内容</td>
                  <td>部位类型</td>
                  <td>告警时间</td>
                  <td>处理状态</td>
                </tr>
              </thead>
              <tbody v-if="list.length>0">
                <tr v-for="(item,idx) in list" :key="idx">
                  <td>{{idx + 1}}</td>
                  <td>
                    <div :title="composeAlarmContent(item)">{{composeAlarmContent(item)}}</div>
                  </td>
                  <td>
                    <div :title="item.KindMC">{{item.KindMC}}</div>
                  </td>
                  <td>
                    <div :title="item.AlarmTime">{{item.AlarmTime}}</div>
                  </td>
                  <td>{{item.Status}}</td>
                </tr>
              </tbody>
              <tbody v-else>
                <tr>
                  <td colspan="5">暂无信息</td>
                </tr>
              </tbody>
            </table>
            <x-pager
              :page="page"
              :page-size="pageSize"
              :total="total"
              :max-page="maxPage"
              @pagehandler="pageHandler"
            ></x-pager>
          </div>
        </div>

        <x-loading :show="showLoading"></x-loading>
      </div>
    </div>
  </div>
</template>
<style scoped>
.row {
  display: flex;
  flex-flow: row nowrap;
}
.col {
  align-items: top;
}
.col-left {
  flex-grow: 0;
  order: 0;
  width: 600px;
}
.col-left .chart {
  width: 100%;
  height: 470px;
}
.col-right {
  flex-grow: 1;
  order: 1;
}
</style>
<script>
import Pager from "@/components/Pager";
import Loading from "@/components/Loading";
import axios from "axios";

export default {
  data() {
    return {
      dangerType: "",
      dangerTypeArray: [
        "报警主机",
        "用水发生异常",
        "用电发生异常",
        "人工隐患上报"
      ],
      keyword: "",
      list: [],
      showLoading: false,
      page: 1,
      pageSize: 10,
      total: 10,
      maxPage: 9,
      district: this.take,
      showDialog: false,
      dialogTitle: "安全隐患告警日志",
      startTime: this.dateShift(0),
      endTime: this.dateShift(0),
      timeLimit: this.dateShift(0),
      timeMin: this.dateShift(-365),
      chartInstance: null,
      option: null
    };
  },
  components: {
    "x-pager": Pager,
    "x-loading": Loading
  },
  props: {
    take: String,
    show: Boolean
  },
  methods: {
    composeAlarmContent(item) {
      return `${item.MC}的${item.AlarmType}-${item.QTexts}`;
    },
    pageHandler(page) {
      this.page = page;
      let params = {
        county: this.district,
        keyword: this.keyword,
        type:this.dangerType,
        pageSize: this.pageSize,
        pageIndex: this.page,
        startTime: this.startTime + " 00:00:00",
        endTime: this.endTime + " 23:59:59"
      };
      this.showLoading = true;
      axios
        .get(this.URLHEAD + "IDangerAreaDistribution", {
          params: params
        })
        .then(res => {
          let data = res.data;
          this.list = data.Data[0].data;
          this.total = data.Data[0].count;
          this.renderChart(data);
          this.showLoading = false;
        });
    },
    query(val) {
      this.district = val ? val : this.district;
      this.startTime = this.$parent.startTime;
      this.endTime = this.$parent.endTime;
      this.showDialog = true;
      this.list = [];
      this.pageHandler(1);
    },
    reset() {
      this.keyword = "";
      this.type = "";
      this.page = 1;
      this.pageSize = 10;
      this.startTime = this.oneMonthAgo();
      this.endTime = this.today();
    },
    closeDialog() {
      this.reset();
      this.showDialog = false;
    },
    renderChart(data) {
      this.option = {
        tooltip: {
          show: "true",
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,0.7)", // 背景
          padding: [8, 10], //内边距
          extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
          formatter: '{b}:{c}次'
        },
        grid: {
          top: 10,
          left: 10,
          right: 50,
          bottom: 10,
          containLabel: true
        },
        xAxis: {
          axisLine: { color: "#ffffff33" },
          axisTick: { color: "#ffffff33" },
          axisLabel: { fontSize: 12, color: "#fff",formatter(p){return p+'次'} },
          splitLine: { show: true, lineStyle: { color: "#ffffff33" } },
          splitArea: { show: true, areaStyle: { color: "#ffffff10" } },
          type: "value"
        },
        yAxis: {
          axisLine: { color: "#ffffff33" },
          axisTick: { color: "#ffffff33" },
          axisLabel: { fontSize: 12, color: "#fff", interval: 0 },
          splitLine: { show: true, lineStyle: { color: "#ffffff33" } },
          splitArea: { show: true, areaStyle: { color: "#ffffff10" } },
          type: "category",
          data: data.Data[0].dt.map(o => {
            let s = this.StringEllipse(o.Peo.MC, 6);
            return s;
          })
        },
        series: [
          {
            name: "各部位告警数量",
            type: "bar",
            barWidth: "30%",
            data: data.Data[0].dt.map(o => {
              return { name: o.Peo.MC, value: o.Count };
            }),
            label: {
              show: true,
              color: "#fff",
              fontSize: 12,
              position: "right",
              formatter(p){
                return p.value+'次'
              }
            },
            itemStyle: {
              normal: {
                show: true,
                color: {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    { offset: 0, color: this.COLORS[2] },
                    { offset: 1, color: this.COLORS[5] }
                  ],
                  global: false
                },
                barBorderRadius: [0, 10, 10, 0]
              }
            }
          }
        ]
      };
      let $this = this;
      $this.chartInstance = this.$Crender("chart-dl-district", this.option);
      $this.chartInstance.on("click", e => {
        let districtName = e.data.name;
        $this.keyword = districtName;
        $this.query();
      });
    }
  }
};
</script>